<template>
  <div class="block">
    <Title
      minTitle="设备"
      title="节点群组"
      introduce="以分组的形式管理节点设备，提供了搜索、添加新的群组、重命名、移动设备等功能。"
    />

    <div class="search">
      <!-- 搜索 -->
      <el-form ref="form" :inline="true" label-width="80px" :model="query">
        <el-form-item label="群组名称:">
          <el-input v-model="query.keyword" placeholder="群组名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="search-button"
            type="primary"
            @click="onSubmit"
            icon="el-icon-search"
            size="medium"
          >
            搜索
          </el-button>
          <span class="search-result">搜索结果:{{ total }}</span>
        </el-form-item>
      </el-form>
      <el-button
        class="groupadd-button"
        type="primary"
        @click="addDialog"
        size="medium"
      >
        新增群组
        <i class="el-icon-plus"></i>
      </el-button>
    </div>
    <el-table :data="devGroup" border style="width: 100%" class="teble">
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="groupName" label="群组名称"></el-table-column>
      <el-table-column prop="nodeNums" label="传感器节点数量"></el-table-column>
      <el-table-column prop="onlineNums" label="在线设备数量"></el-table-column>
      <el-table-column prop="cTime" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="showDialog(scope.row.id, scope.row.groupName)"
            type="text"
            >重命名</el-button
          >
          <el-button type="text" @click="handleDel(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.currPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="群组名称" :visible.sync="dialogVisible" width="30%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item label="群组名称" prop="groupName">
          <el-input v-model="ruleForm.groupName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Title from "@/components/Title.vue";
import { $devGroup, $groupDel, $groupAdd, $groupEdit } from "@/api/index.js";

export default {
  name: "devgroup",
  components: {
    Title,
  },
  data() {
    return {
      devGroup: [],
      query: {
        currPage: 1,
        pageSize: 5,
        keyword: "",
      },
      total: 0,
      // 弹窗是否显示 false不显示，true显示
      dialogVisible: false,
      // 添加或修改时群组名称
      ruleForm: { groupName: "" },
      // 做验证处理 validate
      rules: {
        groupName: [
          { required: true, message: "请输入群组名称", trigger: "blur" },
        ],
      },
      // 要修改的数据id
      editId: "",
    };
  },
  created() {
    this.getGroup();
  },
  methods: {
    // 删除
    handleDel(id) {
      // 删除前需要确认
      this.$confirm("此操作将永久删除该文件，是否继续？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("id:" + id);
          console.log("del:" + id);
          $groupDel({ id: id }).then((res) => {
            if (res.data.code === 666) {
              this.$message({
                type: "success",
                message: "删除成功！",
              });
              this.query.currPage = 1;
              // 重新渲染页面
              this.getGroup();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 显示添加接口
    addDialog() {
      this.dialogVisible = true;
      this.editId = "";
      this.ruleForm.groupName = "";
    },
    // 显示修改窗口，并把群组信息带过去
    showDialog(id, groupName) {
      this.dialogVisible = true;
      this.editId = id;
      this.ruleForm.groupName = groupName;
    },
    // 点击确认按钮
    handleok() {
      // 验证表单提交的数据是否符合验证条件
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.editId !== "") {
            this.editItem();
          } else {
            this.addItem();
          }
        } else {
          return false;
        }
      });
    },
    // 添加
    addItem() {
      $groupAdd({ groupName: this.ruleForm.groupName }).then((res) => {
        if (res.data.msg == "success") {
          this.dialogVisible = false;
          this.getGroup();
        }
      });
    },
    // 修改
    editItem() {
      $groupEdit({ id: this.editId, groupName: this.ruleForm.groupName }).then(
        (res) => {
          if (res.data.msg == "success") {
            this.dialogVisible = false;
            this.getGroup();
          }
        }
      );
    },

    handleSizeChange(num) {
      this.query.pageSize = num;
      this.query.currPage = 1;
      this.getGroup();
    },
    handleCurrentChange(num) {
      this.query.currPage = num;
      this.getGroup();
    },
    onSubmit() {
      this.getGroup();
      this.query.currPage = 1;
    },
    // 获取数据
    getGroup() {
      $devGroup(this.query).then((res) => {
        this.devGroup = res.data.data;
        this.total = res.data.total;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.block /deep/ th div,
/deep/ td div {
  text-align: center;
}
.search {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  margin-bottom: 10px;
  border-radius: 4px;
  padding: 10px;
  .search-button {
    margin: 0 40px 0 20px;
  }
  .el-form-item {
    margin-bottom: 0;
  }
  .search-result {
    color: #909399;
  }
  .groupadd-button {
    i {
      font-weight: 700;
    }
  }
}
.teble {
  button {
    cursor: pointer;
    background-color: transparent;
    border: 0;
    color: blue;
    &:hover {
      opacity: 0.5;
    }
  }
}
.pagination-block {
  padding: 20px 0;
  background-color: #ffffff;
  text-align: center;
  margin-bottom: 30px;
  .el-pagination {
    display: inline-block;
  }
}
</style>
